<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="components/head :: head(~{:: title}, ~{:: link})">
    <title>江文|WenDev</title>
    <link rel="stylesheet" th:href="@{css/wen.css}">
    <link rel="stylesheet" th:href="@{/css/type.css}">
</head>
<body>

<!-- Header -->
<div th:replace="components/navbar_and_head :: navbarAndHeader"></div>
<!-- End Header -->

<!-- Content -->
<div class="container">
    <!-- Body -->
    <div class="container">
        <div class="col-md-12">
            <div class="big-title">
                <h1 class="page-title">搜索结果 <small>Result</small></h1>
            </div>

            <div class="col-md-12" th:if="${page.content.size() == 0}" style="margin-top: 30px">
                <h1>No Data</h1>
            </div>

            <div th:if="${page.content.size() != 0}">
                <!-- Articles -->
                <div class="col-md-12">
                    <div class="article" th:each="article : ${page.content}">
                        <div>
                            <h1>
                                <a th:href="@{'/article/' + ${article.id}}" th:text="${article.title}"></a>
                            </h1>
                        </div>
                        <div>
                            <p th:text="|${#strings.abbreviate(article.content, 400)}|">
                            </p>
                        </div>
                        <div class="article-info">
                            <span class="glyphicon glyphicon-calendar"></span>
                            <span class="info-content"
                                  th:text="${#dates.format(article.updateTime, 'yyyy-MM-dd')}"></span>
                            <span class="glyphicon glyphicon-th-list"></span>
                            <span class="info-content" th:text="${article.type.name}"></span>
                            <span class="glyphicon glyphicon-eye-open"></span>
                            <span class="info-content" th:text="${article.views}"></span>
                            <span class="glyphicon glyphicon-tag"></span>
                            <span class="info-content" th:each="tag : ${article.tags}" th:text="${tag.name}"></span>
                        </div>
                        <div>
                            <a th:href="@{'/article/' + ${article.id}}" class="btn btn-default pull-right">Read More</a>
                        </div>
                    </div>
                </div>
                <!-- End Articles -->
            </div>
            <!-- End Articles -->
        </div>
    </div>
    <!-- End Body -->

    <!-- Pagination -->
    <nav th:if="${page.content.size() != 0}" aria-label="Page navigation"
         class="col-md-offset-4 col-lg-offset-4col-xl-offset-4">
        <ul class="pagination">
            <li class="disabled" th:if="${page.first == true}">
                <span>
                    <span aria-hidden="true">&laquo;</span>
                </span>
            </li>
            <li th:if="${page.first == false}">
                <a th:href="@{/(page=${page.number} - 1)}" aria-label="Next"
                   onclick="page(this)" th:attr="data-page=${page.number - 1}">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <!-- 当前页面小于等于4 -->
            <li class="page-item" th:if="${(page.number + 1) le 4}"
                th:each="i : ${#numbers.sequence(1, page.totalPages)}"
                th:classappend="${(page.number + 1) eq i} ? 'active' : ''">
                <a th:href="@{/(page=${i - 1})}">
                    <span data-th-text="${i}"></span>
                </a>
            </li>

            <!--                <li class="active">-->
            <!--                    <span>1</span>-->
            <!--                </li>-->
            <!--                <li><a href="#">2</a></li>-->
            <!--                <li><a href="#">3</a></li>-->
            <!--                <li><a href="#">4</a></li>-->
            <!--                <li><a href="#">5</a></li>-->
            <li class="disabled" th:if="${page.last == true}">
                <span>
                    <span aria-hidden="true">&raquo;</span>
                </span>
            </li>
            <li th:if="${page.last == false}">
                <a th:href="@{/(page=${page.number} + 1)}" aria-label="Next"
                   onclick="page(this)" th:attr="data-page=${page.number + 1}">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- End Pagination -->


    <!-- Footer -->
    <div th:replace="components/footer :: footer"></div>
    <!-- End Footer -->
</div>
<!-- End Content -->
</body>
</html>
